<template>
  <div>
    <button
      class="mybutton"
      @click="handlerclick"
      :class="{
        success: res == 'success',
        warning: res == 'warning',
        danger: res == 'danger',
      }"
      v-bind="$attrs"
    >
      <slot></slot>
    </button>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ["res"],
  methods: {
    handlerclick(e) {
      // 自定义click属性
      this.$emit("click", e.target.value);
    },
  },
};
</script>

<style lang="less" scoped>
.mybutton {
  width: 320 /360 * 100vw;
  background-color: #2897ff;
  height: 40px;
  margin: 0 auto;
  color: #fff;
  border: 0;
  font-size: 20px;
  outline: 0;
  border-radius: 20px;
}
.success {
  background-color: #38cb1c;
}
.danger {
  background-color: #ff5e61;
}
.warning {
  background-color: #efa300;
}
</style>